<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipList"
				border
				style="width: 100%">
				<el-table-column align="center"
					label="产品图片"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{row}">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName"
					align="center"
					label="产品名称">
				</el-table-column>
				<el-table-column prop="description"
					align="center"
					label="产品描述">
				</el-table-column>
				<el-table-column prop="price"
					align="center"
					label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory"
					align="center"
					label="库存">
				</el-table-column>
				<el-table-column 
                label="操作"
                align="center">
					<el-button type="primary"
						icon="iconfont icon-chongzhi">充值</el-button>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
	import * as api from "../../../../api"
	export default {
		data() {
			return {
				vipList: []
			}
		},
		created() {
			api.getVipListApi("20210827165510715")
				.then(res => {
					console.log(res);
					if (res.data.state) {
						//获取成功
						this.vipList = res.data.data
					} else {
						this.$message.error("获取失败")
					}
				})
		}
	}
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
</style>
